<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>首页</title>
    <meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1">
    <meta name="format-detection" content="telephone=yes">
    <meta name="msapplication-tap-highlight" content="no">
    <link rel="stylesheet" href="css/css.css"/>
    <link rel="stylesheet" href="css/banner.css"/>
    <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<div class="main_box">
        <header class="header">
            <article class="anti-fake_box">
                <p>产品唯一编码: <span>AFDRS008</span>    <em>被扫次数: <span>21</span></em></p>
                <p>上次被扫时间: <span>2016-01-15</span>  <span>19:30:20</span>    <a class="href_btn">举报</a></p>
            </article> 
            <nav class="swiper-container banner_box">
                <ul class="swiper-wrapper">
                    <li class="swiper-slide">
                        <img src="img/banner.jpg" width="100%"/>
                    </li>
                    <li class="swiper-slide">
                        <img src="img/banner.jpg" width="100%"/>
                    </li>
                </ul>
                <div class="swiper-pagination"></div>
                <span class="anti_fake_btn">
                    <img src="img/anti-fake-ico-yes.png" width="100%" /><!--假货：anti-fake-ico-no.png-->
                </span>
            </nav>
        </header>
        <article class="article_master">
            <section class="moster_box">
                <h4>产品基本信息</h4>
                <hgroup class="hgroup_img_logo">
                    <img src="img/logo.png" width="100%" />
                </hgroup>
                <article class="article_box">
                    <div class="list_box clear">
                        <span class="list_box_name">产品名称:</span>
                        <span class="list_box_introduce">加加酱油</span>
                    </div>
                    <div class="list_box clear">
                        <span class="list_box_name">生产厂家:</span>
                        <span class="list_box_introduce"> 
                            <a class="href_btn">加加食品股份集团有限公司</a>
                        </span>
                    </div>
                    <div class="list_box clear">
                        <span class="list_box_name">保质时间:</span>
                        <span class="list_box_introduce">12个月</span>
                    </div>
                    <div class="list_box clear">
                        <span class="list_box_name">产地:</span>
                        <span class="list_box_introduce">湖南省长沙市宁乡县经济开发区</span>
                    </div>
                </article>
            </section>

            <section class="moster_box_burdening">
                <article class="burdening_box">
                    <h4>配料</h4>
                    <hgroup>
                        <span>面粉</span>
                        <span>谷氨气钠</span>
                        <span>大豆</span>
                        <span>面粉</span>
                        <!-- <span>食用油</span> -->
                        <span>红枣</span>
                        <span>燕麦</span>
                        <span>小麦</span>
                    </hgroup>  
                </article>

                <article class="nutrition_box">
                    <h4>营养成分</h4>
                    <div class="nutrition_list">
                        <span class="nutrition_name">多肽</span>
                        <div class="nutrition_inner">
                            <div class="inner_list" style="width:20%;"><!--width:-->
                                <div class="inner_all_animation"></div>
                            </div>
                        </div>
                        <p class="nutrition_number">
                           92.8g/85%
                        </p>
                    </div>
                    <div class="nutrition_list">
                        <span class="nutrition_name">能量</span>
                        <div class="nutrition_inner">
                            <div class="inner_list" style="width:50%;">
                                 <div class="inner_all_animation"></div>
                            </div>
                        </div>
                        <p class="nutrition_number">
                           2301kg/27%
                        </p>
                    </div>
                    <!-- <div class="nutrition_list">
                        <span class="nutrition_name">碳水化合物</span>
                        <div class="nutrition_inner">
                            <div class="inner_list" style="width:70%;">
                                <div class="inner_all_animation"></div>
                            </div>
                        </div>
                        <p class="nutrition_number">
                           83mg/4%
                        </p>
                    </div> -->    
                    <div class="nutrition_list">
                        <span class="nutrition_name">脂肪</span>
                        <div class="nutrition_inner">
                            <div class="inner_list" style="width:40%;">
                                <div class="inner_all_animation"></div>
                            </div>
                        </div>
                        <p class="nutrition_number">
                           40.2g/50%
                        </p>
                    </div>
                    <div class="nutrition_list">
                        <span class="nutrition_name">维生素E</span>
                        <div class="nutrition_inner">
                            <div class="inner_list" style="width:90%;">
                                 <div class="inner_all_animation"></div>
                            </div>
                        </div>
                        <p class="nutrition_number">
                           6.7g/11%
                        </p>
                    </div>  
                </article>
            </section>

            <section class="moster_box_video">
                <article class="video_box">
                    <video class="embed_box"  poster="img/video_img.jpg"><!--poster：图片-->
                        <source src="https://media.html5media.info/video.mp4">
                    </video>    
                </article>
            </section>
    </article>
    <footer class="footer_btn">
        <a class="footer_message"><!--我要留言，跳转第三方-->
        <img src="img/message_ico.png" width="20px"/>
            我要留言
        </a>
    </footer>
</div>
</body>
<script src="js/swiper.min.js"></script>
<script type="text/javascript">
        var swiper = new Swiper('.banner_box', {
            pagination: '.swiper-pagination',
            autoplay : 5000,
            paginationClickable: true
        });
    $(function(){
        $('.anti_fake_btn').toggle(
          function () {
            $('.banner_box').animate({'margin-top':'62px'});
            $('.anti-fake_box').animate({'top':'0'});
            $(this).addClass('anti_fake_btn_active');
          },
          function () {
            $('.banner_box').animate({'margin-top':'0'});
            $('.anti-fake_box').animate({'top':'-62px'});
            $(this).removeClass('anti_fake_btn_active');
        });
    });
</script>
</html>
